<script setup>
import { mainStore } from "@/store/index";
// import { storeToRefs } from "pinia";

const store = mainStore();
// 第一种方法
const addCount = () => {
  store.count++;
  store.birthday = store.birthday + "b";
};

// 第二种方法 多数据修改用这个比较好
const addCount2 = () => {
  // $patch的方式是经过优化的，会加快修改速度
  store.$patch({
    count: store.count + 2,
    birthday: store.birthday + "a",
  });
};
// 第三种方式 函数 处理复杂业务
const addCount3 = () => {
  store.$patch(state => {
    state.count = state.count + 3;
    state.birthday = state.birthday + "c";
  });
};
// 第四种 调用store 的action
const addCount4 = () => {
  store.changeMyState();
};

const fen = () => {
  store.getList();
};

// 不是响应式
const { count: count2 } = store;
// 响应式
const { count } = storeToRefs(store);
</script>

<template>
  <div>
    <h1>{{ store.count }}</h1>
    <div>响应式：{{ count }}</div>
    <div>不是响应式：{{ count2 }}</div>
    <button @click="addCount">点击</button>
    <button @click="addCount2">点击2</button>
    <button @click="addCount3">点击3</button>
    <button @click="addCount4">点击4</button>
    <br/>
    <button @click="fen">多个store相互调用,效果看控制台</button>
  </div>
</template>

<style scoped></style>
